<script lang="ts" setup name="todo">
import {computed, ref, watchEffect} from 'vue';
import {getStorage, setStorage} from '@/utils/storage';
import gsap from 'gsap';
import active from '/images/selection.png';
import activeSelection from '/images/active-selection.png';

// 异步加载组件
const todoItem = defineAsyncComponent(() => import('./components/todo-item.vue'));
// 列表
const list = ref(getStorage('todoList') || []);
// 数据过滤判断
const type = ref<number>(0);
// 全选
const selectStatus = ref<boolean>(false);
watchEffect(() => {
  // 全选监听
  selectStatus.value =
      list.value.every((it: { check: boolean }) => it.check) && !!list.value.length;
  // 列表发生变化存进localstorage,判断有没有全选
  setStorage('todoList', list.value);
});

// 全选
function handleAllSelect() {
  selectStatus.value = !selectStatus.value;
  list.value = list.value.map((it: object) => ({
    ...it,
    check: selectStatus.value,
  }));
}

// 过滤list
const filterList = computed(() =>
    type.value === 0
        ? list.value
        : list.value.filter((it: { check: never }) =>
            type.value === 1 ? it.check : !it.check
        )
);

// 添加一项todo
function handleListPush(e: any) {
  // if (!e.target.value) return ElMessage.error('请输入')
  list.value.push({
    title: e.target.value,
    id: Math.random().toString(16).slice(2) + Math.random().toString(16).slice(2),
    check: false,
  });
  e.target.value = '';
}

function enter(el, done) {
  gsap.to(el, {
    opacity: 1,
    transform: 'translateX(0px)',
    delay: el.dataset.index * 0.1,
    onComplete: done,
  });
}

function leave(el, done) {
  gsap.to(el, {
    opacity: 0,
    transform: 'translateX(-40px)',
    delay: 0.05,
    onComplete: done,
  });
}
</script>

<template>
  <div class="w600 mx-auto mt-100 select-none todo">
    <div class="todo-header   flex-items-center flex h-60 overflow-hidden">
      <img :src="selectStatus ? activeSelection : active" class="w-40 cursor-pointer px-10" @click="handleAllSelect"/>
      <input placeholder="what needs to be done" type="text" @keyup.enter="handleListPush" class="border-none outline-none flex-1 text-25 h96% p-0 bg-transparent"/>
    </div>
    <div class="todo-content">
      <template v-if="list.length">
        <transition-group appear enter-active-class="init" tag="div" @enter="enter" @leave="leave">
          <todoItem v-for="(item, index) in type===0?list:list.filter(j=>type===1?j.check:!j.check)" :key="item.id" v-model:list="list" :data-index="index"
                    :item="item"/>
        </transition-group>
      </template>
      <div v-else class="flex-center border-b-[1px] py-[10px]">
        <img src="/images/none.png"/>
      </div>
    </div>
    <div class="color-#999 flex-justify-between flex-items-center flex py-15 px-20 text-14 flex-wrap">
      <div>{{ filterList.length }} 项</div>
      <div class="cursor-pointer bg-#eee rounded-4 overflow-hidden">
        <div class="inline-block border-none color-#000 outline-none py-5 px-15 box-border" :class="[type === 0 ? 'active' : '']" @click="type = 0">所有</div>
        <div class="inline-block border-none color-#000 outline-none py-5 px-15 box-border" :class="[type === 1 ? 'active' : '']" @click="type = 1">已完成</div>
        <div class="inline-block border-none color-#000 outline-none py-5 px-15 box-border" :class="[type === 2 ? 'active' : '']" @click="type = 2">未完成</div>
      </div>
      <div class="cursor-pointer" @click="list.length = 0">清除所有</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.todo {
  box-shadow: 0 0 10px 1px #eee;

  .todo-header {
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
    background: rgba(0, 0, 0, 0.003);
  }
}

.active {
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #f52443;
  color: #fff;
}

.init {
  opacity: 0;
  transform: translateX(40px);
}
</style>
